<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>菜单页面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <th:block th:include="include :: header('菜单页面')" />
    <style type="text/css">
        .btn-sm {
            margin: 0 5px;
        }
    </style>
</head>
<body>

<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="role-form">
                <div class="select-list">
                    <ul>

                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-success" onclick="$.operate.add()">
                <i class="fa fa-plus"></i> 新增
            </a>
            <a class="btn btn-primary single disabled" onclick="$.operate.edit()">
                <i class="fa fa-edit"></i> 修改
            </a>
            <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()" >
                <i class="fa fa-remove"></i> 删除
            </a>
            <a class="btn btn-warning" onclick="$.table.exportExcel()" >
                <i class="fa fa-download"></i> 导出
            </a>
        </div>

        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>

</body>
<th:block th:include="include :: footer" />
<script type="text/javascript" th:inline="none">
       var prefix = "/system/users";
        $(function() {
            var options = {
                url: prefix + "/list",
                createUrl: prefix + "/add",
                updateUrl: prefix + "/edit/{id}",
                removeUrl: prefix + "/remove",
                exportUrl: prefix + "/export",
                modalName: "用户",
                columns: [{
                    checkbox: true
                },
                    {
                        field: 'id',
                        title: '用户编号'
                    },
                    {
                        field: 'username',
                        title: '用户名称',
                        sortable: true
                    },
                    {
                        field: 'roleSort',
                        title: '显示顺序',
                        sortable: true
                    },
                    {
                        field: 'createTime',
                        title: '创建时间',
                        sortable: true
                    },
                    {
                        title: '操作',
                        align: 'center',
                        formatter: function(value, row, index) {
                            if (row.id != 1) {
                                var actions = [];
                                actions.push('<a class="btn btn-success btn-xs " href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                                actions.push('<a class="btn btn-danger btn-xs " href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a> ');
                                var more = [];
                                more.push("<a class='btn btn-default btn-xs ' href='javascript:void(0)' onclick='authDataScope(" + row.id + ")'><i class='fa fa-check-square-o'></i>数据权限</a> ");
                                more.push("<a class='btn btn-default btn-xs ' href='javascript:void(0)' onclick='authUser(" + row.id + ")'><i class='fa fa-user'></i>分配用户</a>");
                                actions.push('<a tabindex="0" class="btn btn-info btn-xs" role="button" data-container="body" data-placement="left" data-toggle="popover" data-html="true" data-trigger="hover" data-content="' + more.join('') + '"><i class="fa fa-chevron-circle-right"></i>更多操作</a>');
                                return actions.join('');
                            } else {
                                return "";
                            }
                        }
                    }]
            };
            $.table.init(options);
        });

    // 格式化按钮
    function operateFormatter(value, row, index) {
        return [
            '<button type="button" class="add btn btn-sm btn-primary" ><i class="fa fa-plus"></i> 新增</button>',
            '<button type="button" class="edit btn btn-sm btn-info" ><i class="fa fa-pencil-square-o"></i> 修改</button>',
            '<button type="button" class="delete btn btn-sm btn-danger " ><i class="fa fa-trash-o"></i> 删除</button>'
        ].join('');
    }

    // 格式化类型
    function typeFormatter(value, row, index) {
        if (value === '1') {
            return '男';
        }
        if (value === '2') {
            return '女';
        }
        if (value === '3') {
            return '未知';
        }
        return '-';
    }

    function close() {
        alert("-----")
        $("#searchForm").populateForm(null);
    }

    /**
     * 添加时，添加为子菜单，
     * @param row
     */
    function add(row) {
        var serializeObject = $("#searchForm").serializeObject()
        serializeObject.parentName = row.menuTitle
        serializeObject.parentId = row.id;
        $("#searchForm").populateForm(serializeObject);
        $('#exampleModal').modal('toggle')
    }

    function save() {
        var searchForm = $('#searchForm').serialize();
        $.ajax({
            url: '/saveMenus',
            data: searchForm,
            dataType: 'json',
            type: 'post',
            success: function (data) {
                reLoad();
                $('#searchForm').populateForm(null);
                $('#exampleModal').modal('toggle')
            }
        })
    }

    function del(row) {
        $.ajax({
            url: '/deleteMenus',
            data: {id: row.id},
            dataType: 'json',
            type: 'post',
            success: function (data) {
                reLoad();
            }
        })
    }

    function update(row) {
        $("#searchForm").populateForm(row);
        $('#exampleModal').modal('toggle')
    }

    //初始化操作按钮的方法
    window.operateEvents = {
        'click .add': function (e, value, row, index) {
            add(row);
        },
        'click .delete': function (e, value, row, index) {
            del(row);
        },
        'click .edit': function (e, value, row, index) {
            update(row);
        }
    };

    function tableHeight() {
        return $(window).height() - 30;
    }


    function reLoad() {
        //var pageNumber = $("#dataTable").bootstrapTable("getOptions").pageNumber; // 获取当前页码
        $("#menu_table").bootstrapTable('refreshOptions', {pageNumber: 1});  // pageNumber:1, 指定页码
    }
</script>

</body>
</html>